<template>
  <template v-if="hideMonitor">
    <Table :data-source="list" :columns="columns" :pagination="false" />
  </template>
  <template v-else>
    <Tabs v-model:active-key="activeKey" type="card">
      <TabPane tab="设备信息" key="1">
        <Table :data-source="list" :columns="columns" :pagination="false" />
      </TabPane>
      <!-- <TabPane tab="监测数据" key="2"> </TabPane> -->
    </Tabs>
  </template>
</template>

<script lang="tsx" setup>
import { computed, ref } from 'vue';
import { useDicts } from '@boeyo/portal';
import { TabPane, Table, TableProps, Tabs } from 'ant-design-vue';

const { deviceTypeEnum } = useDicts(['device_type']);

interface Device {
  id: number;
  pointCode: string;
  stationId: string;
  pointName: string;
  location: string;
  deviceList?: any;
  top: string;
  left: string;
  deviceId: null;
  type: string;
  model: string;
  manufacturer: string;
  deviceCode: string;
  version: string;
  longitude: string;
  latitude: string;
  height: string;
  powerSupplyId: string;
  powerSupplyName: string;
  edgeCode: string;
  edgeModel: string;
  stationCode: string;
  networkCode: string;
}

interface Props {
  device: Device;
  hideMonitor?: boolean;
}

const { device, hideMonitor = false } = defineProps<Props>();

const list = computed(() => {
  return [
    {
      type: device?.type,
      model: device?.model,
      manufacturer: device?.manufacturer,
      deviceCode: device?.deviceCode,
      version: device?.version,
      longitude: device?.longitude,
      latitude: device?.latitude,
      height: device?.height,
    },
  ];
});

const activeKey = ref('1');

const columns: TableProps['columns'] = [
  {
    title: '设备类型',
    dataIndex: 'type',
    customRender({ value }) {
      return <span>{deviceTypeEnum.value[value]?.text || '强震仪'}</span>;
    },
  },
  {
    title: '设备型号',
    dataIndex: 'model',
  },
  {
    title: '设备厂商',
    dataIndex: 'manufacturer',
  },
  {
    title: '硬件序列号',
    dataIndex: 'deviceCode',
  },
  {
    title: '软件版本',
    dataIndex: 'version',
  },
  {
    title: '设备经度',
    dataIndex: 'longitude',
  },
  {
    title: '设备纬度',
    dataIndex: 'latitude',
  },
  {
    title: '高程',
    dataIndex: 'height',
  },
];
</script>
